<template>
<div>
  <Row :gutter="30" >
    <i-col>
      <!-- <Row>
        <div style='margin-left:10px ;margin-top:4vh'>
          <RadioGroup  slot="extra" v-model="switchWay" type="button">
            <Radio label="路段一" style="background-color:rgba(0,0,0,0);height:30px;font-size:18px;color:#595959;border-color:#595959;font-weight:bold;"></Radio>
            <Radio  label="路段二" style="background-color:rgba(0,0,0,0);height:30px;font-size:18px;color:#595959;border-color:#595959;font-weight:bold;"></Radio>
          </RadioGroup>
        </div>
      </Row> -->
      <!-- <Row>
        <div class='weather-icon'>
          <span v-for='(item, index) in weatherIcon' :key='index'>
            <Icon  :type='item.type' :color='item.color' size=30 />
            {{item.content}}&nbsp;&nbsp;
          </span>
        </div>
      </Row> -->
      <Row >
        <div >
          <MonitorGrid ></MonitorGrid>
        </div>
      </Row> 
    </i-col>
    <!-- <i-col :span="7">
      <MonitorEventsTable></MonitorEventsTable>
    </i-col> -->
  </Row>
</div>
</template>
<script>
import MonitorGrid from './monitorGrid.vue'
import {mapState} from 'vuex'
export default {
  // data(){
  //   return{
  //     switchWay:'路段一'
  //   }
  // },
  computed: {
    ...mapState(['weatherIcon']),
    switchWay:{
      get(){
        return this.$store.state.switchWay;
      },
      set(val){
        this.$store.dispatch('changeSwitchWay',val)
      }
    }
   
  },
  components:{
    MonitorGrid
  }
};
</script>

<style lang="less">
.ivu-radio-group-button .ivu-radio-wrapper-checked {
  border-color: #fff !important;
  color: #fff !important;
}
.weather-icon {
  padding: 2px;
  //background-color:#13a4c2;
  font-size:20px;
  color:#fff;
  margin:5px 10px;
  width:69.3%
}
</style>
